<template>
	<view class="comment" v-if="options.type == 1">
		<view class="popup">
			<view class="title">提交投诉反馈内容</view>
			<!-- 门店差评评价选择栏 -->
			<view class="tab_box flex-r-s-c">
				<!-- 				<view class="tab_item" style="width: auto; padding: 0 22rpx; margin-right: 20rpx;"
					:class="item.id == cpTabCurrent ? 'active' : ''" v-for="(item,index) in cpTabList" :key="index"
					:data-cpTabCurrent="item.id" @tap="cpTabChange">
					{{item.title}}
				</view> -->
				<view class="tab_item" v-for="(item, index) in cpTabList" :key="index" :class="{ active: arr[index] }" @tap="cpTabChange(item.id, index)">{{ item.title }}</view>


			</view>
			<!-- 编辑栏 -->
			<textarea maxlength="200" :value="cpEditText"
				:placeholder="options.type==3?'描述商品使用体验，把美好生活分享给更多人！':options.type==2?'本次服务完成啦！期待您的五星好评':'请详述你的问题，以便我们提供更好的帮助'"
				@input="cpEditInput" />
			<view class="textNumber">{{cpEditIndex}}/200</view>
			<!-- 门店差评图片上传 -->
			<view class="popup_uploadImg_box flex-r-a-c">
				<view class="imgse_view" v-for="(item,index) in popupImageList" :key="index">
					<image :src="item.url" mode="widthFix" :data-imageIndex="item.imageIndex" data-type="2"
						:data-indexKey="index" @tap="imageUpload"></image>
					<view class="flex-c-c-c imgse_view_xx" v-if="item.url!=imgseags" @click.top="del_imgs(index,2)">
						<u-icon name="close" color="#FFF" size="25"></u-icon>
					</view>
				</view>
			</view>
			<!-- 确定按钮 -->
			<view class="btn" @tap="submit">确定</view>
		</view>
	</view>
	<view class="comment" v-else>
		<!-- 标题 -->
		<view class="title" v-if="options.type == 2">您对门店/技师满意吗？</view>
		<view class="title" v-if="options.type == 3">您对商品满意吗？</view>
		<!-- 服务信息/商品信息 -->
		<view class="service_box flex-r-a-c">
			<image :src="options.image" mode=""></image>
			<view class="service_f">
				<view class="name">{{options.name}}</view>
				<view class="service_text flex-r-s-c" v-if="options.type == 2">
					<image src="../../static/mine/js.png" mode=""></image>
					<view class="text">{{options.jsName}}</view>
				</view>
			</view>
		</view>
		<!-- 评价 -->

		<view class="evaluate_box" v-if="options.type == 2">

			<view class="list flex-r-b-c">
				<view class="title">环境</view>
				<view class="tab_box flex-r-a-c">
					<view class="tab_item" :class="item.tabIndex == hjTabCurrent ? 'active' : ''"
						v-for="(item,index) in tabList" :key="index" :data-hjTabCurrent="item.tabIndex"
						@tap="hjtabChange">
						{{item.name}}
					</view>
				</view>
			</view>

			<view class="list flex-r-b-c">
				<view class="title">服务</view>
				<view class="tab_box flex-r-a-c">
					<view class="tab_item" :class="item.tabIndex == fwTabCurrent ? 'active' : ''"
						v-for="(item,index) in tabList" :key="index" :data-fwTabCurrent="item.tabIndex"
						@tap="fwtabChange">
						{{item.name}}
					</view>
				</view>
			</view>

		</view>


		<view class="evaluate_box flex-r-s-c" v-if="options.type == 3">
			<view style="margin-right: 20rpx; font-size: 24rpx; color: #000000;">描述相符</view>
			<u-rate :count="5" v-model="SPStars"></u-rate>
			<view style="margin-left: 20rpx; font-size: 24rpx; color: #F5F5F5;"></view>
		</view>

		<!-- 编辑框 -->
		<view class="edit_box flex-r-a-s">
			<image src="../../static/mine/textIcon.png" mode="widthFix"></image>
			<textarea maxlength="200" :value="editText" placeholder-style="font-size: 24rpx; color: #A2A2A2;"
				:placeholder="options.type==3?'描述商品使用体验，把美好生活分享给更多人！':options.type==2?'本次服务完成啦！期待您的五星好评':'请详述你的问题，以便我们提供更好的帮助'"
				@input="editInput" />
			<view class="textNumber">{{editIndex}}/200</view>
			<!-- 图片上传 -->
			<view class="uploadImg_box flex-r-a-c">
				<view class="imgse_view" v-for="(item,index) in imageList" :key="index">
					<image :src="item.url" mode="widthFix" :data-imageIndex="item.imageIndex" :data-type="1"
						:data-indexKey="index" @tap="imageUpload"></image>
					<view class="flex-c-c-c imgse_view_xx" v-if="item.url!=imgseags" @click.top="del_imgs(index,1)">
						<u-icon name="close" color="#FFF" size="25"></u-icon>
					</view>
				</view>
			</view>

		</view>

		<view class="stars_box" v-if="options.type == 3">
			<view class="titleName">{{options.cname}}</view>
			<view class="list flex-r-s-c">
				<view class="text">物流服务</view>
				<u-rate :count="5" v-model="WLStars"></u-rate>
			</view>
			<view class="list flex-r-s-c">
				<view class="text">服务态度</view>
				<u-rate :count="5" v-model="FWStars"></u-rate>
			</view>
		</view>

		<!-- 底部框 -->
		<view class="bottom_box flex-r-b-c">
			<view class="bottom_l">
				<u-checkbox-group size="40">
					<u-checkbox v-model="checked" shape="circle" active-color="#45806E" @change="checkedChange">匿名评价
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="bottom_f" @tap="submit">提交</view>
		</view>

		<!-- 差评弹框 -->
		<u-popup class="popup" v-model="isDifference" mode="center" border-radius="20" closeable="true" width="95%"
			height="80%">
			<view class="title">填写差评原因</view>
			<!-- 差评选择栏 -->
			<view class="tab_box flex-r-c-c">
				<!-- <view class="tab_item" :class="item.id == cpTabCurrent ? 'active' : ''"
					v-for="(item,index) in cpTabList" :key="index" :data-cpTabCurrent="item.id" @tap="cpTabChange">
					{{item.title}}
				</view> -->
				<view class="tab_item" v-for="(item, index) in cpTabList" :key="index" :class="{ active: arr[index] }" @tap="cpTabChange(item.id, index)">{{ item.title }}</view>
			</view>
			<!-- 编辑栏 -->
			<textarea maxlength="200" :value="cpEditText"
				:placeholder="options.type==3?'描述商品使用体验，把美好生活分享给更多人！':options.type==2?'本次服务完成啦！期待您的五星好评':'请详述你的问题，以便我们提供更好的帮助'"
				@input="cpEditInput" />
			<view class="textNumber">{{cpEditIndex}}/200</view>
			<!-- 弹框图片上传 -->
			<view class="popup_uploadImg_box flex-r-a-c">
				<view class="imgse_view" v-for="(item,index) in popupImageList" :key="index">
					<image :src="item.url" mode="widthFix" :data-imageIndex="item.imageIndex" data-type="2"
						:data-indexKey="index" @tap="imageUpload"></image>
					<view class="flex-c-c-c imgse_view_xx" v-if="item.url!=imgseags" @click.top="del_imgs(index,2)">
						<u-icon name="close" color="#FFF" size="25"></u-icon>
					</view>
				</view>
			</view>
			<!-- 确定按钮 -->
			<view class="btn" @tap="submit">确定</view>
		</u-popup>

	</view>
</template>

<script>
	import imgs from '../../static/mine/tpsc.png'
	export default {
		data() {
			return {
				options: {}, // 页面数据
				hjTabCurrent: 0, // 环境的tab栏下标
				fwTabCurrent: 0, // 服务的tab栏下标
				cpTabCurrent: [], // 差评的tab栏下标
				tabList: [{ // 发表评价 服务和环境的 tab
					name: '好评',
					tabIndex: 0
				}, {
					name: '中评',
					tabIndex: 1
				}, {
					name: '差评',
					tabIndex: 2
				}],
				editText: '', // 发表评价的编辑栏
				cpEditText: '', // 差评的的编辑栏
				editIndex: 0, // 发表评论编辑栏的字数
				cpEditIndex: 0, // 差评的编辑栏的字数
				imageList: [{ // 没有上传图片的列表
					url: imgs,
					imageIndex: 0
				}, {
					url: imgs,
					imageIndex: 1
				}, {
					url: imgs,
					imageIndex: 2
				}],
				popupImageList: [{ // 差评没有上传的图片列表
					url: imgs,
					imageIndex: 0
				}, {
					url: imgs,
					imageIndex: 1
				}, {
					url: imgs,
					imageIndex: 2
				}],
				imgList: [], // 上传图片的路径
				checked: false, // 是否 匿名提交
				isDifference: false, // 差评的弹框显示
				cpTabList: [], // 差评的的tab
				SPStars: 0, // 商品星星的数据
				WLStars: 0, // 物流星星的数据
				FWStars: 0, // 服务星星的数据
				imglists: [],
				imgseags: imgs,
				arr: []
			};
		},
		onLoad(options) {
			this.options = JSON.parse(options.data) // 在数据中的 type 是用于判断类型 1: 门店的差评，2: 服务技术的差评，3: 商品的差评
			console.log(this.options)
			this.getFeedbackList() // 获取反馈列表
			uni.setNavigationBarTitle({
				title: this.options.type == 3 ? '商品评论' : this.options.type == 2 ? '服务评论' : '意见反馈'
			});
		},
		methods: {
			// 获取反馈列表
			getFeedbackList() {
				let that = this
				that.$api.feedback_list().then(res => {
					console.log(res)
					that.cpTabList = res.data.data
					res.data.data.forEach(e => {
						that.arr.push(false)
					})
				})
			},
			// 环境 tab 栏
			hjtabChange(e) {
				this.hjTabCurrent = e.currentTarget.dataset.hjtabcurrent
				if (this.hjTabCurrent == 2) {
					this.isDifference = true
				}
			},
			// 服务 tab 栏
			fwtabChange(e) {
				this.fwTabCurrent = e.currentTarget.dataset.fwtabcurrent
				if (this.fwTabCurrent == 2) {
					this.isDifference = true
				}
			},
			// 差评 tab 栏
			cpTabChange(e , index) {
				let that = this
				for(let i = 0; i < that.arr.length; i++){
					if(i == index){
						that.arr[index] ? that.arr.splice(index,1,false) : that.arr.splice(index,1,true)
						if(that.arr[index] == true){
							that.cpTabCurrent = that.cpTabCurrent.concat(e)
						} else {
							that.cpTabCurrent.map((i,j) => {
								if(i == e){
									that.cpTabCurrent.splice(j,1)
								}
							})
						}
					}
				}
			},
			// textarea 编辑框
			editInput(e) {
				this.editIndex = e.detail.cursor
				this.editText = e.detail.value
			},
			cpEditInput(e) {
				this.cpEditIndex = e.detail.cursor
				this.cpEditText = e.detail.value
			},
			// 是否匿名
			checkedChange(e) {
				console.log(e)
				this.checked = e.value
			},
			// 点击提交
			submit() {
				this.options.type == 1 ? this.MDSubmit() : this.options.type == 2 ? this.FWSubmit() : this.SPSubmit()
			},
			// 门店的提交
			MDSubmit() {
				let that = this
				if (that.cpTabCurrent.length == 0) {
					uni.showToast({
						title: '请你选择反馈的类型',
						icon: 'none'
					})
				} else if (that.cpEditText == '') {
					uni.showToast({
						title: '请填写意见反馈',
						icon: 'none'
					})
				} else {
					let data = {
						type: that.cpTabCurrent,
						content: that.cpEditText,
						image: that.imgList.toString()
					}
					that.$api.opinion_upload(data).then(res => {
						console.log(res)
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tabBar/mine/mine'
							})
						}, 1000)
					})
				}
			},
			// 服务的提交
			FWSubmit() {
				let that = this
				let hjIndex = that.hjTabCurrent,
					fwIndex = that.fwTabCurrent
				let data = {
					images: that.imgList.toString(),
					content: hjIndex == 2 ? that.cpEditText : fwIndex == 2 ? that.cpEditText : that.editText,
					service: that.tabList[fwIndex].name,
					environment: that.tabList[hjIndex].name,
					anonymous: that.checked == true ? 1 : 2,
					fid: that.cpTabCurrent,
					id: that.options.id
				}
				if (data.content == '') {
					uni.showToast({
						title: '请填写意见反馈',
						icon: 'none'
					})
					return
				}
				that.$api.technician_feedback(data).then(res => {
					console.log(res)
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			},
			// 商品的提交
			SPSubmit() {
				let that = this
				let data = {
					orderid: that.options.orderid,
					anonymous: that.checked == true ? 1 : 2,
					good_score: that.SPStars,
					logistics: that.WLStars,
					attitude: that.FWStars,
					content: that.editText,
					image: that.imgList
				}
				if (data.good_score == 0) {
					uni.showToast({
						title: '请给商品评星',
						icon: 'none'
					})
				} else if (data.logistics == 0) {
					uni.showToast({
						title: '请给物流评星',
						icon: 'none'
					})
				} else if (data.attitude == 0) {
					uni.showToast({
						title: '请给服务评星',
						icon: 'none'
					})
				} else if (data.content == '') {
					uni.showToast({
						title: '请填写意见反馈',
						icon: 'none'
					})
				} else {
					that.$api.shop_feedback(data).then(res => {
						console.log(res)
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					})
				}

			},
			del_imgs(index, type) { //删除图片
				let that = this,
					obj = {
						url: that.imgseags,
						imageIndex: index
					}
				if (type == 2) {
					that.popupImageList.splice(index, 1)
					that.popupImageList.push(obj)
				} else {
					that.imageList.splice(index, 1)
					that.imageList.push(obj)
				}
				that.imgList.splice(index, 1)
			},
			// 图片上传
			imageUpload(e) {
				let that = this
				let type = e.currentTarget.dataset.type // 这里的 type 是判断是否是差评图片上传 1: 正常上传的图片, 2: 差评上传的图片
				let index = e.currentTarget.dataset.indexkey
				that.imglists = []
				console.log(index)
				uni.chooseImage({
					count: that.imgList.length == 3 ? 1 : 3,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success(res) {
						if (that.imgList.length != 0) {
							that.shanchuan(res.tempFilePaths[0], index)
							if (type == 2) {
								that.popupImageList[index].url = res.tempFilePaths[0]
							} else {
								that.imageList[index].url = res.tempFilePaths[0]
							}

						} else {
							console.log(res.tempFilePaths[0], index, '333');
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								that.shanchuan(res.tempFilePaths[i])
								if (type == 2) {
									that.popupImageList[i].url = res.tempFilePaths[i]
								} else {
									that.imageList[i].url = res.tempFilePaths[i]
								}
							}
						}
						console.log(res);
					}
				})

			},
			shanchuan(res, index) {
				let that = this
				uni.uploadFile({
					url: 'https://yft.yangfatang.cn/Uploads/imageUploads',
					filePath: res,
					name: 'image',
					success(res) {
						console.log(res, index)
						let ress = JSON.parse(res.data)
						console.log(ress)
						if (index == null || index == undefined) {
							that.imglists = that.imglists.concat(ress.data)
							that.imgList = that.imglists
						} else {
							that.imgList[index] = ress.data
						}
					},
					fail(err) {
						console.log(err)
					}
				})
			}

		}
	}
</script>

<style lang="less">
	page {
		background-color: #FFFFFF;
	}

	.comment {
		// width: 100vw;
		margin: 40rpx auto;
		// border-radius: 40rpx;
		box-sizing: border-box;
		padding: 40rpx;

		.title {
			font-size: 28rpx;
			font-weight: 500;
			color: #3B3B3B;
		}

		//
		.service_box {
			margin-top: 40rpx;
			padding-bottom: 40rpx;
			border-bottom: 1px solid #F2F2F2;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
			}

			.service_f {
				width: 65%;
				line-height: 80rpx;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #3B3B3B;
				}

				.service_text {
					image {
						width: 30rpx;
						height: 30rpx;
					}

					.text {
						margin-left: 18rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #464646;
					}
				}
			}
		}

		//
		.evaluate_box {
			margin: 40rpx auto;

			.list {
				width: 100%;
				height: 80rpx;

				.title {
					width: 20%;
					text-align: center;
					color: #45806E;
					font-weight: bold;
					font-weight: 28rpx;
				}

				.tab_box {
					width: 80%;

					.tab_item {
						width: 120rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						border-radius: 10rpx;
						border: 1px solid #CCCCCC;
						font-size: 24rpx;
						font-weight: 400;
						color: #4B4B4B;
					}

					.active {
						color: #FFFFFF;
						background-color: #45806E;
					}
				}
			}
		}

		//
		.edit_box {
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 20rpx;
			background-color: #F5F5F5;
			border-radius: 20rpx;
			flex-wrap: wrap;

			image {
				width: 26rpx;
				height: 26rpx;
				margin-top: 19rpx;
			}

			textarea {
				width: 95%;
				box-sizing: border-box;
				padding: 20rpx;
			}

			.textNumber {
				width: 100%;
				text-align: right;
				color: #C1C1C1;
				font-weight: 500;
				font-size: 22rpx;
				padding-right: 20rpx;
			}

			.uploadImg_box {
				width: 100%;

				image {
					width: 156rpx;
					height: 116rpx;
				}
			}
		}

		//
		.stars_box {
			width: 100%;
			height: auto;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding-bottom: 100rpx;
			margin-top: 20rpx;

			.titleName {
				font-size: 40rpx;
				font-weight: bold;
			}

			.list {
				margin-top: 20rpx;
			}
		}

		//
		.bottom_box {
			width: 100vw;
			height: 104rpx;
			box-sizing: border-box;
			padding: 0rpx 40rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #FFFFFF;

			.bottom_f {
				width: 228rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				color: #FFFFFF;
				background-color: #45806E;
				font-weight: 500;
				font-size: 32rpx;
				border-radius: 40rpx;

			}
		}

		//
		.popup {
			.title {
				width: 100%;
				text-align: center;
				margin-top: 40rpx;
				font-weight: bold;
				font-size: 32rpx;
			}

			.tab_box {
				flex-wrap: wrap;
				width: 90%;
				margin: 40rpx auto;

				.tab_item {
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 40rpx;
					border: 1px solid #CCCCCC;
					color: #4B4B4B;
					font-size: 24rpx;
					font-weight: 400;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
				}

				.active {
					border: 1px solid #437D6C;
					color: #437D6C;
				}
			}

			textarea {
				width: 90%;
				margin: 0 auto;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				background-color: #F5F5F5;
				box-sizing: border-box;
				padding: 20rpx;
				font-size: 24rpx;
				color: #8B8B8B;
			}

			.textNumber {
				width: 90%;
				margin: 0 auto;
				text-align: right;
				background-color: #F5F5F5;
				color: #8D8D8D;
				padding-right: 20rpx;
			}

			.popup_uploadImg_box {
				width: 90%;
				margin: 0 auto;
				background-color: #F5F5F5;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				box-sizing: border-box;
				padding: 20rpx 0rpx;

				.imgse_view {
					width: 150rpx;
					// height: 100rpx;
					position: relative;

					image {
						width: 150rpx;
						height: 100rpx;
					}

					.imgse_view_xx {
						position: absolute;
						right: -20rpx;
						top: -20rpx;
						border-radius: 50%;
						width: 40rpx;
						height: 40rpx;
						background-color: #aa0000;
					}
				}

			}

			.btn {
				margin: 40rpx auto;
				width: 40%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				color: #FFFFFF;
				background-color: #45806E;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
</style>
